<template>
  <!-- 2023/12/30 添加 -->
  <div class="safety wh100">
    <!-- 质量检查 -->
    <div class="zlxj-wrap">
      <div class="title-wrap">
        <div class="flex_align title">
          <div class="dot"></div>质量检查
        </div>
      </div>
      <div class="content-wrap" style="justify-content: space-between;" ref="zlxjBox">
        <el-table class="box1" header-cell-class-name="projectErrTableHeadCell" ref="zlxjTable" :data="qualityInspectionData.tableList" border style="width: 100%" stripe :height="tableHeight" highlight-current-row @cell-click="zlxjTableClick">
          <el-table-column :label="`${tableLabel}名称`" min-width="200" align="center" prop="name">
          </el-table-column>
          <el-table-column label="检查数/发现问题数" min-width="120" prop="count" align="center">
            <template slot-scope="scope">
              {{ scope.row.checkNum + '/' + scope.row.findNum }}
            </template>
          </el-table-column>
        </el-table>
        <div class="box2" id="zgqk-pie" @click="onGoto('/qualityCheck/qualityInspection')"></div>
        <div class="box3" id="zgqk-line" style="overflow: hidden;"></div>
      </div>
    </div>

    <!-- 安全隐患情况 -->
    <div class="aqyh-wrap">
      <div class="title-wrap">
        <div class="flex_align title">
          <div class="dot"></div>安全隐患情况
        </div>
        <el-date-picker size="small" class="datePicker" style="width: 140px;" v-model="aqyyqk.month" @change="getAqyhqk" format="yyyy年M月" value-format="yyyy-MM" type="month" placeholder="选择月">
        </el-date-picker>
      </div>
      <div class="content-wrap" style="justify-content: space-between;" ref="aqyhBox">
        <div class="box1" id="aqyh-pie" @click="onGoto('/securityCheck/hiddenDangerLibrary')"></div>
        <el-table class="box2" header-cell-class-name="projectErrTableHeadCell" ref="aqyhTable" highlight-current-row @cell-click="aqyhTableClick" :data="safetyCheckInspectionData.tableList" border style="width: 100%" stripe :height="tableHeight">
          <el-table-column :label="`${tableLabel}名称`" min-width="120" align="center" prop="name">
          </el-table-column>
          <el-table-column label="检查数/发现隐患数" min-width="120" prop="count" align="center">
            <template slot-scope="scope">
              {{ scope.row.checkNum + '/' + scope.row.findNum }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="aqjc-wrap">
      <div class="title-wrap">
        <div class="flex_align title">
          <div class="dot"></div>安全整改
        </div>
      </div>
      <div class="content-wrap">
        <div class="box2" id="aqjc-pie" @click="onGoto('/securityCheck/safetyRectification')"></div>
        <div class="box3" id="aqjc-line" style="overflow: hidden;"></div>
      </div>
    </div>

    <!-- 施工作业人员 -->
    <div v-show="false" class="sgzy-wrap">
      <div class="title-wrap">
        <div class="flex_align title">
          <div class="dot"></div>施工作业人员
        </div>
      </div>
      <div class="content-wrap">
        <div class="box1">
          <div class="filter-wrap">
            <div class="first_filter">
              <div class="first_filter_item" :class="{ active: firstFilter === item.key }" v-for="(item, index) in firstFilterGroup" :key="item.key || index" @click="onFirstFilterChange(item.key)">
                <div class="item_name">{{ item.name }}</div>
                <div class="item_account">{{ '合计： ' + item.account + '人' }}</div>
              </div>
            </div>
            <div id="sun_conatiner" class="filter-result" />
            <div class="second_filter_block">
              <div class="second_filter">
                <el-checkbox-group v-model="secondFilter" @change="getSearchResult">
                  <el-checkbox class="green_checkbox" label="履约人员"></el-checkbox>
                  <el-checkbox class="green_checkbox" label="一般管理人员"></el-checkbox>
                  <el-checkbox class="green_checkbox" label="特种作业人员"></el-checkbox>
                  <el-checkbox class="green_checkbox" label="一般作业人员"></el-checkbox>
                  <el-checkbox class="green_checkbox" label="男性"></el-checkbox>
                  <el-checkbox class="green_checkbox" label="女性"></el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="result_text">
                <div class="sub_text">筛选结果：</div>
                <div class="result_number">{{ filterResult + '人' }}</div>
              </div>
            </div>
          </div>
          <div class="echarts-line" id="result_bar">
          </div>

        </div>
        <div class="line"></div>
        <div class="box2">
          <div class="title">特种作业人员</div>
          <div class="sgzy-bar" id="sgzy-bar"></div>
        </div>
      </div>
    </div>

    <div v-show="false" class="aqjypx-wrap">
      <div class="title-wrap">
        <div class="flex_align title">
          <div class="dot"></div>安全教育培训
        </div>
      </div>
      <div class="content-wrap" style="flex-wrap: wrap;">
        <div class="aqjypx-search btn_group">
          <el-radio-group v-model="aqjypxSearch.type" @change="getAqjypx1" style="width: 100%;">
            <el-radio-button label="1">教育培训</el-radio-button>
            <el-radio-button label="2">岗前教育</el-radio-button>
            <el-radio-button label="3">技术交底</el-radio-button>
          </el-radio-group>
        </div>
        <div class="box1" id="aqjypx-line" style="overflow: hidden;"></div>
      </div>
    </div>
  </div>
</template>
<script>
// import qualityInspection from '@/api/buss/qualityInspection'
// import safetyCheckInspection from '@/api/buss/safetyCheckInspection'
// import dangerousEngineerlist from '@/api/buss/dangerousEngineerList'
// import entryExitRegistration from '@/api/buss/entryExitRegistration'
// import mechanicalEquipment from '@/api/buss/mechanicalEquipment'
import msgUtil from '@/utils/msgUtil'
import * as echarts from 'echarts';
// import { timeFormat } from '@/views/cockpit/bigScreen/utils/time'
export default {
  name: 'safety',
  components: {},
  data() {
    return {
      projectsArr: [],
      projectErrTableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      tableHeight: 180,
      tableHeight2: 180,
      tableHeight3: 180,
      aqjypxSearch: {
        type: '1'
      },
      secondFilter: ['履约人员', '特种作业人员', '男性', '女性'],
      firstFilter: 'sign',
      resultBar: '',
      filterResult: 0,
      firstFilterGroup: [
        {
          name: '登记人数',
          key: 'sign',
          account: 0,
        },
        {
          name: '在场人数',
          key: 'in',
          account: 0,
        },
        {
          name: '退场人数',
          key: 'out',
          account: 0,
        },
      ],
      clickProjectId: '',
      contractSection: '',
      qualityInspectionData: {},
      safetyCheckInspectionData: {},
      dangerousEngineerlistData: {
        wd: 0,
        cw: 0,
        tableList: []
      },
      deviceData: {
        tableList: [],
        total: 0,
        in: 0,
        out: 0
      },
      chartInstance: {},
      aqyyqk: {
        month: new Date().Format("yyyy-MM")
      },
      aqjyStr: {}
    };
  },
  computed: {
    projectId() {
      return this.$store.state.settings.changeHeaderProject
    },
    tableLabel() {
      return this.projectId ? '单位' : '项目'
    },
    tableLabel2() {
      return this.projectId ? '标段' : '项目'
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler: function(val) {
        this.qualityInspectionData.currentRow = null
        this.safetyCheckInspectionData.currentRow = null
        if (val) {
          this.isOneProject = true
        } else {
          this.isOneProject = false
        }
        console.log("isOneProject=", this.isOneProject)
        this.$nextTick(() => {
          this.init()
          // this.getQualityInspectionData()
          // this.getQualityInspectionDataRight()
          // this.getAqyhqk()
          // this.getAqyhqkRight()
          // this.getWdgc()
          // this.getAqjypx()
          // this.getSearchResult()
          // this.getSpecialTypeTable()
          // this.getDeviceBulletinBoard()
        })
      }
    }
  },
  created() {
    this.projectsArr = JSON.parse(sessionStorage.getItem('projectsArr'))
    this.projectsArr.splice(0, 1)
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.zlxjBox) { this.tableHeight = window.getComputedStyle(this.$refs.zlxjBox).height }
      if (this.$refs.wdgcTable) { this.tableHeight2 = window.getComputedStyle(this.$refs.wdgcTable).height }
      if (this.$refs.jxsbTable) { this.tableHeight3 = window.getComputedStyle(this.$refs.jxsbTable).height }
    })
    this.init('')
  },
  methods: {
    onGoto(url) {
      const rData = this.$router.resolve({ path: url })
      window.open(rData.href, '_blank')
    },
    init() {
      let list = []
      this.aqjypxSearch.type == 1
      if (this.isOneProject) {//单项目
        this.qualityInspectionData = {
          tableList: [{ name: 'TJ1', checkNum: '241', findNum: '18723' }, { name: 'TJ2', checkNum: '241', findNum: '18723' }, { name: 'TJ3', checkNum: '241', findNum: '18723' }, { name: 'TJ4', checkNum: '241', findNum: '18723' }],
          currentRow: null
        }
        this.safetyCheckInspectionData = {
          tableList: [{ name: 'TJ1', checkNum: '241', findNum: '18723' }, { name: 'TJ2', checkNum: '241', findNum: '18723' }, { name: 'TJ3', checkNum: '241', findNum: '18723' }, { name: 'TJ4', checkNum: '241', findNum: '18723' }],
          currentRow: null
        }
        list = [{ projectName: 'TJ1', result: 5 }, { projectName: 'TJ2', result: 8 }, { projectName: 'TJ3', result: 9 }]
        this.drawBar('sgzy-bar', {
          xData: ['TJ1', 'TJ2', 'TJ3', 'TJ4', 'TJ5', 'TJ6'],
          data: [
            {
              name: '总人数',
              value: [700, 600, 640, 620, 650, 710],
              color: '#449BFF',
              barGap: '0',
            }, {
              name: '持证数',
              value: [500, 400, 440, 420, 450, 510],
              color: '#23DFAC',
              barGap: '-100%',
            },
            {
              name: '证书过期',
              value: [200, 200, 340, 320, 350, 310],
              color: '#FDBF54',
              barGap: '-100%',
            }
          ]
        })
        this.aqjyStr = {
          data: [
            {
              name: 'TJ1', data: [72, 48, 67, 74, 69, 72],
              color: '#3799FF'
            },
            {
              name: 'TJ2', data: [44, 47, 46, 51, 46, 42],
              color: '#61DDAA'
            },
            {
              name: 'TJ3', data: [31, 27, 28, 25, 33, 31],
              color: '#FFBF59'
            },
          ],
          xData: ['2023.03', '2023.04', '2023.06', '2023.07', '2023.08', '2023.09']
        }
      } else {//多项目
        this.qualityInspectionData = {
          tableList: [{ name: '329国道改建', checkNum: '241', findNum: '18723' }, { name: '镜水路北段', checkNum: '241', findNum: '18723' }, { name: '城投人才公寓', checkNum: '241', findNum: '18723' }, { name: '柯诸高速', checkNum: '241', findNum: '18723' }],
          currentRow: null
        }
        this.safetyCheckInspectionData = {
          tableList: [{ name: '329国道改建', checkNum: '241', findNum: '18723' }, { name: '镜水路北段', checkNum: '241', findNum: '18723' }, { name: '城投人才公寓', checkNum: '241', findNum: '18723' }, { name: '柯诸高速', checkNum: '241', findNum: '18723' }],
          currentRow: null
        }
        list = [{ projectName: '329国道改建', result: 3 }, { projectName: '镜水路北段', result: 5 }, { projectName: '城投人才公寓', result: 9 }]
        this.drawBar('sgzy-bar', {
          xData: ['329国道改建', '镜水路北段', '城投人才公寓', '柯诸高速', '尹大线改造', '北环快速通道'],
          data: [
            {
              name: '总人数',
              value: [700, 600, 640, 620, 650, 710],
              color: '#449BFF',
              barGap: '0',
            }, {
              name: '持证数',
              value: [500, 400, 440, 420, 450, 510],
              color: '#23DFAC',
              barGap: '-100%',
            },
            {
              name: '证书过期',
              value: [200, 200, 340, 320, 350, 310],
              color: '#FDBF54',
              barGap: '-100%',
            }
          ]
        })
        this.aqjyStr = {
          data: [
            {
              name: '329国道改建', data: [72, 48, 67, 74, 69, 72],
              color: '#3799FF'
            },
            {
              name: '镜水路北段', data: [44, 47, 46, 51, 46, 42],
              color: '#61DDAA'
            },
            {
              name: '城投人才公寓', data: [31, 27, 28, 25, 33, 31],
              color: '#FFBF59'
            },
          ],
          xData: ['2023.03', '2023.04', '2023.06', '2023.07', '2023.08', '2023.09']
        }
      }
      this.initResultBar(list)
      this.drawPie('zgqk-pie',
        {
          title: '整改情况',
          data: [
            { value: 60, name: '已整改' },
            { value: 30, name: '已延期' },
            { value: 10, name: '待整改' },
          ],
          color: ['#1E70FA', '#FDBF54', '#06D6A0'],
          center: ['35%', '50%'],
          titleCenter: ['34%', '45%']
        }
      )
      this.drawLine('zgqk-line', {
        data: [
          {
            name: '已整改', data: [65, 55, 64, 72, 48, 67, 74, 69, 72],
            startColor: 'rgba(30, 112, 250, 0.20)', endColor: 'rgba(30, 112, 250, 0)'
          },
          {
            name: '已延期', data: [33, 38, 43, 44, 47, 46, 51, 46, 42],
            startColor: 'rgba(253, 191, 84, 0.20)', endColor: 'rgba(253, 191, 84, 0)'
          },
          {
            name: '待整改', data: [22, 34, 26, 31, 27, 28, 25, 33, 31],
            startColor: 'rgba(6, 214, 160, 0.20)', endColor: 'rgba(6, 214, 160, 0)'
          },
        ],
        xData: ['2022.12', '2023.01', '2023.02', '2023.03', '2023.04', '2023.06', '2023.07', '2023.08', '2023.09']
      })
      this.drawPie('aqyh-pie', {
        title: '隐患分布\n占比',
        data: [
          { value: 60, name: '安全防护' },
          { value: 30, name: '现场三围' },
          { value: 10, name: '临时用电' },
          { value: 10, name: '文明标化' },
          { value: 10, name: '设备设施' },
        ],
        color: ['#1E70FA', '#FDBF54', '#06D6A0', '#8C6CEA', '#E84B50'],
        center: ['30%', '50%'],
        titleCenter: ['28%', '45%']
      })
      this.drawPie('aqjc-pie', {
        title: '整改情况',
        data: [
          { value: 60, name: '已整改' },
          { value: 30, name: '已延期' },
          { value: 10, name: '待整改' },
        ],
        color: ['#1E70FA', '#FDBF54', '#06D6A0'],
        center: ['35%', '50%'],
        titleCenter: ['33%', '45%']
      })
      this.drawLine('aqjc-line', {
        data: [
          {
            name: '已整改', data: [65, 55, 64, 72, 48, 67, 74, 69, 72],
            startColor: 'rgba(30, 112, 250, 0.20)', endColor: 'rgba(30, 112, 250, 0)'
          },
          {
            name: '已延期', data: [33, 38, 43, 44, 47, 46, 51, 46, 42],
            startColor: 'rgba(253, 191, 84, 0.20)', endColor: 'rgba(253, 191, 84, 0)'
          },
          {
            name: '待整改', data: [22, 34, 26, 31, 27, 28, 25, 33, 31],
            startColor: 'rgba(6, 214, 160, 0.20)', endColor: 'rgba(6, 214, 160, 0)'
          },
        ],
        xData: ['2022.12', '2023.01', '2023.02', '2023.03', '2023.04', '2023.06', '2023.07', '2023.08', '2023.09']
      })
      let data = [{
        name: '一般作业人员',
        value: 15,
        children: [{ name: '男性', value: 4 }, { name: '女性', value: 11 }]
      }, {
        name: '特种作业人员',
        value: 15,
        children: [{ name: '男性', value: 4 }, { name: '女性', value: 11 }]
      }]
      this.initResultSun(data)
      this.drawLine2('aqjypx-line', this.aqjyStr)
    },
    zlxjTableClick(row) {
      if (this.qualityInspectionData.currentRow) {
        if (this.qualityInspectionData.currentRow === row) {
          this.$refs.zlxjTable.setCurrentRow()
          this.qualityInspectionData.currentRow = null
        } else {
          this.$refs.zlxjTable.setCurrentRow(row)
          this.qualityInspectionData.currentRow = row
        }
      } else {
        this.$refs.zlxjTable.setCurrentRow(row)
        this.qualityInspectionData.currentRow = row
      }
      this.clickProjectId = row.projectId
      this.contractSection = row.contractId
      this.getQualityInspectionDataRight()
    },
    getQualityInspectionData() {
      const month = this.aqyyqk.month
      const paramsNum = {
        checkDate: month,
        projectId: this.projectId
      }
      qualityInspection.getProblemNum(paramsNum).then(res => {
        if (res.code === 200) {
          const temp = new Map()
          res.data.forEach(item => {
            if (temp.has(item.name)) {
              const { checkNum, findNum } = temp.get(item.name)
              item.checkNum += checkNum
              item.findNum += findNum
            }
            temp.set(item.name, item)
          })
          const list = []
          for (let tempKey of temp.keys()) {
            list.push(temp.get(tempKey))
          }
          this.qualityInspectionData.tableList = list
        }
      })
    },
    getQualityInspectionDataRight() {
      let params = {}
      if (this.contractSection != null && this.contractSection != '') {
        params = {
          projectId: this.projectId,
          contractSection: this.contractSection
        }
      } else {
        if (this.clickProjectId) {
          params = {
            projectId: this.clickProjectId
          }
        } else {
          params = {
            projectId: this.projectId
          }
        }
      }
      if (this.qualityInspectionData.currentRow) {
        params.type = this.qualityInspectionData.currentRow.name
      }
      qualityInspection.getRectificationSituation(params).then(res => {
        if (res.code === 200) {
          this.drawPie('zgqk-pie',
            {
              title: '整改情况',
              data: Object.keys(res.data).map(key => {
                return {
                  name: key,
                  value: res.data[key]
                }
              }),
              color: ['#1E70FA', '#FDBF54', '#06D6A0'],
              center: ['50%', '50%'],
              titleCenter: ['38%', '45%']
            }
          )
        }
      })
      qualityInspection.getRectificSituationList(params).then(res => {
        if (res.code === 200) {
          this.drawLine('zgqk-line', {
            data: [
              {
                name: '已整改', data: res.data.map(item => item.finish),
                startColor: 'rgba(30, 112, 250, 0.20)', endColor: 'rgba(30, 112, 250, 0)'
              },
              {
                name: '已延期', data: res.data.map(item => item.yyq),
                startColor: 'rgba(253, 191, 84, 0.20)', endColor: 'rgba(253, 191, 84, 0)'
              },
              {
                name: '待整改', data: res.data.map(item => item.dzg),
                startColor: 'rgba(6, 214, 160, 0.20)', endColor: 'rgba(6, 214, 160, 0)'
              },
            ],
            xData: res.data.map(item => item.month)
          })
        }
      })
    },
    getAqyhqk() {
      const month = this.aqyyqk.month
      const params = {
        checkDate: month,
        projectId: this.projectId
      }
      safetyCheckInspection.getHiddenDanger(params).then(res => {
        if (res.code === 200) {
          this.drawPie('aqyh-pie', {
            title: '隐患分布占比',
            data: res.data.map(item => {
              return {
                name: item.name,
                value: item.checkNum
              }
            }),
            color: ['#1E70FA', '#FDBF54', '#06D6A0', '#8C6CEA', '#E84B50'],
            center: ['40%', '50%'],
            titleCenter: ['22%', '45%']
          })
        }
      })
      safetyCheckInspection.getProblemNum(params).then(res => {
        if (res.code === 200) {
          const temp = new Map()
          res.data.forEach(item => {
            if (temp.has(item.name)) {
              const { checkNum, findNum } = temp.get(item.name)
              item.checkNum += checkNum
              item.findNum += findNum
            }
            temp.set(item.name, item)
          })
          const list = []
          for (let tempKey of temp.keys()) {
            list.push(temp.get(tempKey))
          }
          this.safetyCheckInspectionData.tableList = list
        }
      })
    },
    handleAqyhCurrentChange(newRow) {
      this.safetyCheckInspectionData.currentRow = newRow
      this.getAqyhqkRight()
    },
    aqyhTableClick(row) {
      if (this.safetyCheckInspectionData.currentRow) {
        if (this.safetyCheckInspectionData.currentRow === row) {
          this.$refs.aqyhTable.setCurrentRow()
          this.safetyCheckInspectionData.currentRow = null
        } else {
          this.$refs.aqyhTable.setCurrentRow(row)
          this.safetyCheckInspectionData.currentRow = row
        }
      } else {
        this.$refs.aqyhTable.setCurrentRow(row)
        this.safetyCheckInspectionData.currentRow = row
      }
      this.clickProjectId = row.projectId
      this.contractSection = row.contractId
      this.getAqyhqkRight()
    },
    getAqyhqkRight() {
      let params2 = {}
      if (this.contractSection != null && this.contractSection != '') {
        params2 = {
          projectId: this.projectId,
          contractSection: this.contractSection
        }
      } else {
        if (this.clickProjectId) {
          params2 = {
            projectId: this.clickProjectId
          }
        } else {
          params2 = {
            projectId: this.projectId
          }
        }
      }
      if (this.safetyCheckInspectionData.currentRow) {
        params2.type = this.safetyCheckInspectionData.currentRow.name
      }
      safetyCheckInspection.getRectificationSituation(params2).then(res => {
        if (res.code === 200) {
          this.drawPie('aqjc-pie', {
            title: '整改情况',
            data: Object.keys(res.data).map(key => {
              return {
                name: key,
                value: res.data[key]
              }
            }),
            color: ['#1E70FA', '#FDBF54', '#06D6A0'],
            center: ['50%', '50%'],
            titleCenter: ['38%', '45%']
          })
        }
      })
      safetyCheckInspection.getRectificSituationList(params2).then(res => {
        if (res.code === 200) {
          this.drawLine3('aqjc-line', {
            data: [
              {
                name: '已办结', data: res.data.map(item => item.finish),
                startColor: 'rgba(30, 112, 250, 0.20)', endColor: 'rgba(30, 112, 250, 0)'
              },
              {
                name: '已延期', data: res.data.map(item => item.yyq),
                startColor: 'rgba(253, 191, 84, 0.20)', endColor: 'rgba(253, 191, 84, 0)'
              },
              {
                name: '待整改', data: res.data.map(item => item.dzg),
                startColor: 'rgba(6, 214, 160, 0.20)', endColor: 'rgba(6, 214, 160, 0)'
              },
            ],
            xData: res.data.map(item => item.month),
            originData: res.data
          })
        }
      })
    },
    getWdgc() {
      const params = {
        projectId: this.projectId
      }
      dangerousEngineerlist.getDangerousNum(params).then(res => {
        if (res.code === 200) {
          let rate = 0, total = 0, cwNum = 0
          if (Object.keys(res.data).length > 0) {
            rate = res.data.rate
            total = res.data.total
            cwNum = res.data.cwNum
          }
          this.drawGauge('wdgc-gauge', {
            value: rate * 100,
            color: '#1e70fa',
            name: "超危险占比"
          })
          this.dangerousEngineerlistData.wd = total
          this.dangerousEngineerlistData.cw = cwNum
        }
      })
      dangerousEngineerlist.getWorkbenchList(params).then(res => {
        if (res.code === 200) {
          this.dangerousEngineerlistData.tableList = res.data
        }
      })
    },
    getAqjypx1() {
      console.log("aqjypxSearch=", this.aqjypxSearch.type)
      if (this.aqjypxSearch.type == 1) {
        this.$set(this.aqjyStr.data[0], 'data', [72, 48, 67, 74, 69, 72])
        this.$set(this.aqjyStr.data[1], 'data', [44, 47, 46, 51, 46, 42])
        this.$set(this.aqjyStr.data[2], 'data', [31, 27, 28, 25, 33, 31])
      } else if (this.aqjypxSearch.type == 2) {
        this.$set(this.aqjyStr.data[0], 'data', [20, 30, 40, 10, 60, 70])
        this.$set(this.aqjyStr.data[1], 'data', [10, 20, 50, 80, 90, 40])
        this.$set(this.aqjyStr.data[2], 'data', [40, 50, 60, 70, 100, 50])
      } else {
        this.$set(this.aqjyStr.data[0], 'data', [50, 60, 80, 10, 60, 70])
        this.$set(this.aqjyStr.data[1], 'data', [10, 20, 30, 80, 40, 40])
        this.$set(this.aqjyStr.data[2], 'data', [40, 40, 60, 70, 90, 50])
      }
      this.drawLine2('aqjypx-line', this.aqjyStr)
    },
    getAqjypx() {
      const params = {
        projectId: this.projectId
      }
      let module
      switch (this.aqjypxSearch.type) {
        case '1':
          module = 'risksafetyeducation'
          break
        case '2':
          module = 'safetyPreJobEducation'
          break
        case '3':
          module = 'securityTechnicalClarification'
          break
      }
      let xData = []
      const color = ['#3799FF', '#61DDAA', '#FFBF59']
      this.$httpPost(`buss/${module}/getWorkbenchList`, params).then(res => {
        if (res.code === 200) {
          this.drawLine2('aqjypx-line', {
            data: res.data.map((item, index) => {
              xData = item.list.map(i => i.month)
              return {
                name: item.projectName,
                data: item.list.map(i => i.times),
                color: color[index % color.length]
              }
            }),
            xData
          })
        }
      })
    },
    getSpecialTypeTable() {
      const params = { projectId: this.projectId }
      entryExitRegistration.getSpecialTypeTable(params).then(res => {
        if (res.code === 200) {
          this.drawBar('sgzy-bar', {
            xData: res.data.map(item => item.name),
            data: [
              {
                // total
                name: '总人数',
                value: res.data.map(item => item.total),
                color: '#449BFF',
                barGap: '0',
              }, {
                // holdCertificate
                name: '持证数',
                value: res.data.map(item => item.holdCertificate),
                color: '#23DFAC',
                barGap: '-100%',
              },
              {
                // expire
                name: '证书过期',
                value: res.data.map(item => item.expire),
                color: '#FDBF54',
                barGap: '-100%',
              }
            ]
          })
        }
      })
    },
    getDeviceBulletinBoard() {
      const params = {
        projectId: this.projectId
      }
      mechanicalEquipment.getDeviceBulletinBoard(params).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.deviceData.in = res.data.inNum
          this.deviceData.out = res.data.outNum
          this.deviceData.total = res.data.total
          this.deviceData.tableList = res.data.list
        }
      })
    },
    drawPie(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Pie']) {
        this.chartInstance[id + '-Pie'].dispose()
      }
      let myChart = echarts.init(chartDom);
      this.chartInstance[id + '-Pie'] = myChart
      let option;
      option = {
        title: {
          text: params.title,
          left: params.titleCenter[0],
          top: params.titleCenter[1],
          textStyle: {
            color: '#000',//'red'，字体颜色
            fontSize: 16,//字体大小
            lineHeight: 16,//字体行高
          },
          textAlign: 'center'
        },
        color: params.color,
        tooltip: {
          trigger: 'item',
          confine: true
        },
        legend: {
          type: 'scroll',
          top: 'center',
          formatter: function(name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          },
          tooltip: {
            show: true,
            confine: true
          },
          right: '0%',
          orient: 'vertical',
          icon: 'circle',
          pageButtonGap: 1,
          itemHeight: 6, // 图例icon高度
          itemWidth: 6, // 图例icon宽度
          itemGap: 20,
        },
        series: [
          {
            name: '整改情况',
            type: 'pie',
            radius: ['45%', '60%'],
            center: params.center,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: params.data
          }
        ]
      };
      option && myChart.setOption(option);
    },
    drawLine(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Line']) {
        this.chartInstance[id + '-Line'].dispose()
      }
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: true,
          right: '5%',
          top: '0',
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '18%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: params.xData,
          axisLabel: {
            //x轴文字的配置
            show: true,
            align: 'center',
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(112, 112, 112, 1)',
            },
          },
        },
        yAxis: {
          type: 'value',
          // max: 100,
          // min: 0,
          // interval: 25,
          minInterval: 1,
          // 文字颜色
          axisLabel: {
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: 'rgba(112, 112, 112, 0.1)',
              type: 'solid',
            },
          },
        },
        series: params.data.map(item => ({
          name: item.name,
          type: 'line',
          data: item.data,
          symbol: 'emptyCircle',
          symbolSize: 5,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: item.startColor,
              },
              {
                offset: 1,
                color: item.endColor,
              },
            ]),
          },
        }))

      }
      let myChart = echarts.init(chartDom)
      myChart.clear()
      this.chartInstance[id + '-Line'] = myChart
      myChart.setOption(option, true)
    },
    drawLine2(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Line2']) {
        this.chartInstance[id + '-Line2'].dispose()
      }
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: false,
          right: '5%',
          top: '0',
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '18%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: params.xData,
          axisLabel: {
            //x轴文字的配置
            show: true,
            align: 'center',
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(112, 112, 112, 1)',
            },
          },
        },
        yAxis: {
          name: '次',
          type: 'value',
          // max: 100,
          // min: 0,
          // interval: 20,
          minInterval: 1,
          // 文字颜色
          axisLabel: {
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: 'rgba(112, 112, 112, 0.1)',
              type: 'solid',
            },
          },
        },
        series: params.data.map(item => ({
          name: item.name,
          type: 'line',
          data: item.data,
          color: item.color,
          showSymbol: false,
        }))

      }
      let myChart = echarts.init(chartDom)
      myChart.clear()
      this.chartInstance[id + '-Line2'] = myChart
      myChart.setOption(option, true)
    },
    drawLine3(id, params) {
      const originData = params.originData
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Line3']) {
        this.chartInstance[id + '-Line3'].dispose()
      }
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            console.log(params)
            // seriesName dataIndex value
            return `
              <div>
                <div>共发起检查:${originData[params[0].dataIndex].checkNum}次</div>
                <div>已办结:${originData[params[0].dataIndex].finish}条</div>
                <div>待整改:${originData[params[0].dataIndex].dzg}条</div>
                <div>其中已延期:${originData[params[0].dataIndex].yyq}条</div>
              </div>
            `
          },
        },
        legend: {
          show: true,
          right: '5%',
          top: '0',
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '18%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: params.xData,
          axisLabel: {
            //x轴文字的配置
            show: true,
            align: 'center',
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(112, 112, 112, 1)',
            },
          },
        },
        yAxis: {
          type: 'value',
          // max: 100,
          // min: 0,
          // interval: 25,
          minInterval: 1,
          // 文字颜色
          axisLabel: {
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: 'rgba(112, 112, 112, 0.1)',
              type: 'solid',
            },
          },
        },
        series: params.data.map(item => ({
          name: item.name,
          type: 'line',
          data: item.data,
          symbol: 'emptyCircle',
          symbolSize: 5,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: item.startColor,
              },
              {
                offset: 1,
                color: item.endColor,
              },
            ]),
          },
        }))

      }
      let myChart = echarts.init(chartDom)
      myChart.clear()
      this.chartInstance[id + '-Line3'] = myChart
      myChart.setOption(option, true)
    },
    drawGauge(id, dataArr) {
      if (this.chartInstance[id + '-Gauge']) {
        this.chartInstance[id + '-Gauge'].dispose()
      }
      var myChart1 = echarts.init(document.getElementById(id));
      this.chartInstance[id + '-Gauge'] = myChart1
      let options1 = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
          name: dataArr.name,
          type: "gauge",
          radius: '100%',
          startAngle: 180, //开始角度
          endAngle: 0, //结束角度
          // 设置成相对的百分比
          center: ['50%', '100%'],
          axisLine: {
            lineStyle: {
              color: [
                [dataArr.value / 100, dataArr.color],
                [1, "#e5efff"],
              ],
              width: 15,
            },
            roundCap: false
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,

          },
          splitLine: {
            show: false,
          },
          itemStyle: {
            show: false,
          },
          pointer: {
            show: false,//是否显示指针
          },
          radius: '200%',
          detail: {
            formatter: function(value) {
              if (value !== 0) {
                var num = Math.round(value);
                return parseInt(num).toFixed(0) + "%";
              } else {
                return '0%';
              }
            },
            offsetCenter: [0, -35],
            textStyle: {
              padding: [0, 0, 0, 0],
              fontSize: 26,
              fontWeight: '700',
              color: '#000'
            }
          },
          title: { //标题
            show: true,
            offsetCenter: [0, -10], // x, y，单位px
            textStyle: {
              color: "#fff",
              fontSize: 14, //表盘上的标题文字大小
              fontWeight: 400,
              fontFamily: 'PingFangSC',
              color: "#000"
            }
          },
          data: [{
            name: dataArr.name,
            value: dataArr.value,
          }],
          animationDuration: 4000,
        },]
      }
      // 绘制图表
      myChart1.setOption(options1);
    },
    drawBar(id, params) {
      let chartDom = document.getElementById(id);
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          right: '5%',
          top: '0',
        },
        grid: {
          containLabel: true,
          left: '3.5%',
          bottom: '0%',
          right: 0,
          top: '15%',
        },
        xAxis: [
          {
            axisLabel: {
              align: 'center',
              interval: 0,
              formatter(name) {
                if (name.length > 4) {
                  return [name.substring(0, 4), name.substring(4)].join('\n')
                }
                return name
              }
            },
            type: 'category',
            data: params.xData,
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '人',
            minInterval: 1,
            splitNumber: 4,
          },
        ],
        series: params.data.map(item => ({
          name: item.name,
          type: 'bar',
          barWidth: 15,
          data: item.value,
          barGap: item.barGap,
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: item.color
          }
        })),
      }
      if (this.chartInstance[id]) {
        this.chartInstance[id].clear()
        this.chartInstance[id].dispose()
      }
      let myChart = echarts.init(chartDom)
      this.chartInstance[id] = myChart
      myChart.clear()
      myChart.setOption(option, true)
    },
    getSearchResult() {
      const id = this.projectId
      const { firstFilter, secondFilter } = this;
      const param = {
        lyry: 0,
        ybglry: 0,
        ybzyry: 0,
        tzzyry: 0,
        male: 0,
        female: 0
      };
      if (firstFilter === 'sign') {
        param.firstLevel = 1;
      } else if (firstFilter === 'in') {
        param.firstLevel = 2;
      } else if (firstFilter === 'out') {
        param.firstLevel = 3;
      }
      secondFilter.forEach((s) => {
        if (s === '履约人员') {
          param.lyry = 1;
        } else if (s === '一般管理人员') {
          param.ybglry = 1;
        } else if (s === '一般作业人员') {
          param.ybzyry = 1;
        } else if (s === '特种作业人员') {
          param.tzzyry = 1;
        } else if (s === '男性') {
          param.male = 1;
        } else if (s === '女性') {
          param.female = 1;
        }
      });
      param.projectId = id
      entryExitRegistration.getBulletinBoard(param).then(({ data } = {}) => {
        const {
          table = {},
          lyry = 0,
          ybzyry = 0,
          tzzyry = 0,
          ybglry = 0,
          dj,
          zc,
          tc,
          sxjg
        } = data;
        // let total = 0
        // if (param.firstLevel === 1) {
        //   total = dj
        // } else if (param.firstLevel === 3) {
        //   total = tc
        // } else if (param.firstLevel === 2) {
        //   total = zc
        // }
        this.firstFilterGroup.find(item => item.key === 'sign').account = dj
        this.firstFilterGroup.find(item => item.key === 'in').account = zc
        this.firstFilterGroup.find(item => item.key === 'out').account = tc
        this.filterResult = sxjg;
        const sunData = [];
        if (this.filterResult > 0) {
          sunData.push({
            name: '人员数量',
            value: this.filterResult,
            children: [],
          });
          if (ybglry > 0) {
            const { ybglryMale = 0, ybglryFemale = 0 } = data;
            sunData[0].children.push({
              name: '一般管理人员',
              value: ybglry,
              children: [{
                name: '男性',
                value: ybglryMale,
              }, {
                name: '女性',
                value: ybglryFemale,
              }],
            });
          }
          if (lyry > 0) {
            const { lyryMale = 0, lyryFemale = 0 } = data;
            sunData[0].children.push({
              name: '履约人员',
              value: lyry,
              children: [{
                name: '男性',
                value: lyryMale,
              }, {
                name: '女性',
                value: lyryFemale,
              }],
            });
          }
          if (tzzyry > 0) {
            const { tzzyryMale = 0, tzzyryFemale = 0 } = data;
            sunData[0].children.push({
              name: '特种作业人员',
              value: tzzyry,
              children: [{
                name: '男性',
                value: tzzyryMale,
              }, {
                name: '女性',
                value: tzzyryFemale,
              }],
            });
          }
          if (ybzyry > 0) {
            const { ybzyryMale = 0, ybzyryFemale = 0 } = data;
            sunData[0].children.push({
              name: '一般作业人员',
              value: ybzyry,
              children: [{
                name: '男性',
                value: ybzyryMale,
              }, {
                name: '女性',
                value: ybzyryFemale,
              }],
            });
          }
        }
        this.initResultSun(sunData);
        const barData = [];
        Object.keys(table).forEach((key) => {
          barData.push({
            projectName: key,
            result: table[key],
          })
        })
        this.initResultBar(barData);
      }).catch((e) => {
        console.log(e)
        msgUtil.error2('获取施工作业人员统计失败！');
      });
    },
    initResultSun(data) {
      let sun;
      if (this.resultSun) {
        sun = this.resultSun;
      } else {
        const el = document.getElementById('sun_conatiner');
        if (!el) return;
        sun = echarts.init(el);
        this.resultSun = sun;
      }
      sun.clear();
      if (data.length === 0) {
        const mockData = [{
          name: '筛选结果',
          value: 10,
          children: [{
            name: '筛选结果',
            value: 10,
          }],
        }];
        sun.setOption({
          series: {
            type: 'sunburst',
            data: mockData,
            radius: [0, '90%'],
            itemStyle: { color: '#dedede' },
            label: {
              show: false,
              rotate: 'radial',
              formatter: '{b}\n{c}人'
            },
          },
        });
      } else {
        sun.setOption({
          series: {
            type: 'sunburst',
            data,
            radius: [0, '90%'],
            label: {
              formatter: '{b}\n{c}人',
            },
            levels: [
              {},
              { label: { rotate: '0' }, },
              { label: { rotate: 'tangential' } },
              { label: { rotate: '0' } },
            ]
          },
        });
      }
    },
    initResultBar(data) {
      let bar;
      if (this.resultBar) {
        bar = this.resultBar;
        bar.clear();
      } else {
        const el = document.getElementById('result_bar');
        if (!el) return;
        bar = echarts.init(el);
        this.resultBar = bar;
      }
      if (data.length === 0) {
        for (let i = 0; i < 6; i++) {
          data.push({
            projectName: '',
            result: 0,
          });
        }
      }
      bar.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          containLabel: true,
          left: '3.5%',
          bottom: '0%',
          right: 0,
          top: '25px',
        },
        xAxis: [
          {
            axisLabel: {
              align: 'center',
            },
            type: 'category',
            data: data.map((d) => d.projectName),
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：人',
            minInterval: 1,
            splitNumber: 4,
          },
        ],
        series: [
          {
            name: '筛选结果',
            type: 'bar',
            barWidth: 15,
            data: data.map((d) => d.result),
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: 'rgba(145, 204, 117, 1)'
            }
          },
        ],
      });
    },
    onFirstFilterChange(val) {
      this.firstFilter = val;
      this.getSearchResult();
    },
  },
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";

.safety {
  font-family: Microsoft YaHei-Regular;
  display: flex;
  flex-wrap: wrap;

  ::v-deep .projectErrTableHeadCell {
    background-color: #f3f8ff;
  }

  .content-wrap {
    height: calc(100% - 55px);
    width: 100%;
    overflow-y: auto;
    display: flex;
  }

  & > div {
    background-color: #fff;
    border-radius: 15px;
    padding: 16px 24px 24px 24px;
  }

  .zlxj-wrap {
    width: 100%;
    // height: 324px;
    height: calc(50% - 24px);
    .box1 {
      width: 427px;
      height: 100%;
      font-size: 16px;
    }

    .box2 {
      width: calc(100% - 1500px);
      height: 100%;
      margin-right: 50px;
    }

    .box3 {
      width: 1000px;
      height: 100%;
    }
  }

  .aqyh-wrap {
    width: 656px;
    // height: 324px;
    height: 50%;
    margin-right: 24px;
    margin-top: 24px;

    .box1 {
      width: 50%;
      height: 100%;
      margin-right: 30px;
    }

    .box2 {
      width: 50%;
      height: 100%;
      font-size: 16px;
    }
  }

  .aqjc-wrap {
    width: calc(100% - 680px);
    // height: 324px;
    height: 50%;
    margin-top: 24px;

    .box2 {
      width: calc(100% - 850px);
      height: 100%;
    }

    .box3 {
      width: 850px;
      height: 100%;
    }
  }

  .wdgc-wrap {
    width: 1215px;
    height: 460px;
    margin-right: 24px;
    margin-top: 24px;

    .projectChangeTotal {
      margin-right: 40px;
      width: 268px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .pfv {
        margin: 5px auto;
        width: 200px;
        height: 100px;
      }

      .total-wrap {
        background: url("~@/assets/images/workbench/wd-icon.png") 0 0 / 100%
          100% no-repeat;
        height: 100px;
        width: 100%;
        margin-bottom: 18px;
        margin-top: 18px;
      }

      .total-wrap2 {
        background: url("~@/assets/images/workbench/cw-icon.png") 0 0 / 100%
          100% no-repeat;
        height: 100px;
        width: 100%;
        margin-bottom: 18px;
      }

      .total-wrap,
      .total-wrap2 {
        padding-left: 31px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .bg-number {
          color: #808080;
          font-size: 14px;
          margin-bottom: 15px;

          & > span {
            font-size: 28px;
            color: #000000;
            display: inline-block;
            margin-left: 15px;
          }
        }

        .ypf-number {
          color: #808080;
          font-size: 14px;

          & > span {
            font-size: 20px;
            color: #1e70fa;
            display: inline-block;
            margin-left: 12px;
          }
        }
      }
    }

    .box2 {
      width: calc(100% - 328px);
      height: 100%;
    }
  }

  .aqjypx-wrap {
    width: calc(100% - 1239px);
    height: 394px;
    margin-top: 24px;
    .aqjypx-search {
      width: 100%;
      height: 35px;
      margin-top: 10px;
      ::v-deep .el-radio-group {
        display: flex;
        border-radius: 8px;
        background-color: #f2f6ff;
        .el-radio-button {
          flex: 1;
          .el-radio-button__inner {
            width: 100%;
            border-color: transparent;
            &:nth-of-type(1) {
              border-left-color: transparent !important;
            }
          }
          &:last-child .el-radio-button__inner {
            border-radius: 0 8px 8px 0;
          }
          &:first-child .el-radio-button__inner {
            border-radius: 8px 0 0 8px;
          }
          &.is-active .el-radio-button__inner {
            border-radius: 8px;
          }
        }
      }
    }

    .box1 {
      width: 100%;
      height: calc(100% - 45px);
    }
  }

  .sgzy-wrap {
    width: 1215px;
    height: 394px;
    margin-right: 24px;
    margin-top: 24px;

    .box1 {
      width: calc(100% - 631px - 50px);
      height: 100%;

      .filter-wrap {
        height: calc(100% - 110px);
        display: flex;

        .first_filter {
          display: flex;
          flex-direction: column;

          &_item {
            width: 88px;
            height: 44px;
            margin-top: 10px;
            border-radius: 8px;
            border: 1px solid #e3f2df;
            cursor: pointer;
            color: #000;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

            &.active {
              background: rgba(#b5dda4, 0.22);
              border: none;
              color: #148d39;
            }

            .item_name {
              font-size: 13px;
              font-weight: bold;
            }

            .item_account {
              font-size: 10px;
              text-align: center;
              margin-top: 3px;
            }
          }
        }

        .filter-result {
          height: 100%;
          width: 200px;
        }

        .second_filter_block {
          width: calc(100% - 288px);

          .second_filter {
            width: 100%;

            ::v-deep .el-checkbox-group {
              display: flex;
              flex-wrap: wrap;

              .green_checkbox {
                margin-top: 10px !important;
                margin-right: 10px !important;
                .is-checked .el-checkbox__inner {
                  background-color: rgba(181, 221, 164, 1);
                  border-color: rgba(181, 221, 164, 1);
                }
                .el-checkbox__input.is-checked + .el-checkbox__label {
                  color: rgba(181, 221, 164, 1);
                }
              }
            }
          }

          .result_text {
            margin-top: 20px;
            display: flex;
            align-items: center;

            .sub_text {
              font-size: 16px;
              color: #000;
            }

            .result_number {
              width: 100px;
              font-size: 18px;
              line-height: 26px;
              text-align: center;
              border-bottom: 1px solid #91cc76;
            }
          }
        }
      }

      .echarts-line {
        height: 100px;
        width: 100%;
      }
    }

    .line {
      width: 1px;
      height: 248px;
      background-color: #dddddd;
      margin: auto 25px;
    }

    .box2 {
      width: 630px;

      .title {
        font-size: 16px;
        color: #000;
        margin-bottom: 10px;
        font-weight: bold;
      }

      .sgzy-bar {
        height: calc(100% - 30px);
        width: 100%;
      }
    }
  }

  .jxsb-wrap {
    width: calc(100% - 1239px);
    height: 394px;
    margin-top: 24px;
  }

  .title-wrap {
    display: flex;
    height: 45px;
    border-bottom: 1px #e6e8ef solid;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    align-items: center;

    .title {
      font-weight: bold;
      font-size: 16px;
    }

    .btn {
      color: #666666;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .dot {
    height: 4px;
    width: 4px;
    background-color: #005fff;
    border-radius: 4px;
    margin-right: 8px;
  }

  .red-number,
  .green-number,
  .blue-number {
    width: 132px;
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    padding: 0 13px;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 12px;

    & > span:first-of-type {
      color: #000;
    }
  }

  .red-number {
    border: 1px #df2a2a solid;
    background-color: rgba(223, 42, 42, 0.05);

    & > span:last-of-type {
      color: #df2a2a;
    }
  }

  .green-number {
    background-color: rgba(73, 178, 35, 0.05);
    border: #49b223 1px solid;

    & > span:last-of-type {
      color: #429f21;
    }
  }

  .blue-number {
    background-color: rgba(30, 112, 250, 0.1);
    border: #1e70fa 1px solid;

    & > span:last-of-type {
      color: #1e70fa;
    }
  }
}
</style>
